/**
 * 文件名: src/components/AppLayout.tsx
 * 
 * 文件概述:
 * 应用主布局组件，实现三栏响应式布局，组合FileTree、Editor和AIDialog。
 * 
 * 依赖项:
 * - 'use client': 声明为客户端组件
 * - react: React核心库
 * - antd: Layout组件(Layout, Header, Sider, Content)
 * - ./FileTree: 文件管理树组件
 * - ./Editor: 编辑器组件
 * - ./AIDialog: AI对话组件
 * - ../store: 状态管理(获取加载状态和错误)
 * 
 * UI设计:
 * - 顶部标题栏:
 *   - 粉红色背景(#ff6b6b)
 *   - 白色应用图标(书本图标)
 *   - 白色标题文字"NovelAI"
 *   - 右侧窗口控制按钮(最小化、最大化、关闭)
 * 
 * - 三栏布局:
 *   - 左侧栏: 260px宽，浅灰背景，项目和章节列表
 *   - 中间区: 自适应宽度，编辑器区域，白色背景
 *   - 右侧栏: 300px宽，AI助手区域，白色背景
 * 
 * 组件结构:
 * - AppLayout: () => JSX.Element
 *   - Layout(antd)
 *     - Header: 应用标题栏
 *     - Layout: 内容区域
 *       - Sider(左侧): <FileTree />
 *       - Content(中间): <Editor />
 *       - Sider(右侧): <AIDialog />
 *   - ErrorDisplay: 错误提示组件(如适用)
 * 
 * 状态:
 * - 左右侧边栏折叠状态
 * - 布局响应式状态
 * - 全局错误状态(从store获取)
 * 
 * 样式定义:
 * - 布局容器样式(.app-layout)
 * - 侧边栏宽度和响应式设置
 * - 内容区域样式(.content-area)
 * 
 * 主要功能:
 * 1. 三栏布局渲染
 * 2. 响应式适配(根据窗口尺寸调整)
 * 3. 侧边栏折叠控制
 * 4. 全局错误显示
 * 
 * 窗口尺寸处理:
 * - 使用useWindowSize hook或React.useEffect监听窗口尺寸变化
 * - 根据窗口尺寸调整布局(如自动折叠侧边栏)
 * 
 * 生命周期:
 * - 组件挂载时: 监听窗口尺寸变化
 * - 组件卸载时: 清理事件监听器
 * 
 * 注意事项:
 * - 确保响应式布局在各种屏幕尺寸下正常工作
 * - 处理侧边栏折叠状态的持久化(可选)
 * - 负责协调三个主要组件但不处理具体业务逻辑
 */

'use client';

import React, { useState, useEffect } from 'react';
import { Layout, Button, Alert, message } from 'antd';
import { MenuFoldOutlined, MenuUnfoldOutlined, CloseOutlined, MinusOutlined, BorderOutlined } from '@ant-design/icons';
import FileTree from './FileTree';
import Editor from './Editor';
import AIDialog from './AIDialog';
import { useAppStore } from '../store';
import { isPlatform } from '../utils/platform';

// 引入antd布局组件
const { Header, Sider, Content } = Layout;

// 窗口尺寸Hook
const useWindowSize = () => {
  const [windowSize, setWindowSize] = useState({
    width: typeof window !== 'undefined' ? window.innerWidth : 1200,
    height: typeof window !== 'undefined' ? window.innerHeight : 800,
  });

  useEffect(() => {
    // 处理窗口尺寸变化
    const handleResize = () => {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

    // 添加事件监听
    window.addEventListener('resize', handleResize);
    
    // 清理函数
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return windowSize;
};

// 错误显示组件
const ErrorDisplay = ({ error, onClose }: { error: string | null, onClose: () => void }) => {
  if (!error) return null;
  
  return (
    <Alert
      message="错误"
      description={error}
      type="error"
      showIcon
      closable
      onClose={onClose}
      style={{ 
        position: 'fixed', 
        bottom: 20, 
        right: 20, 
        zIndex: 1000,
        maxWidth: '80%' 
      }}
    />
  );
};

// 窗口控制按钮组件 (仅桌面版显示)
const WindowControls = () => {
  if (!isPlatform('desktop')) return null;
  
  // 简化的窗口控制函数，避免Tauri API版本问题
  const handleMinimize = () => {
    if (typeof window !== 'undefined' && window.__TAURI__) {
      try {
        // 使用Tauri命令直接调用后端
        // @ts-ignore - 忽略TypeScript错误
        window.__TAURI__.invoke('plugin:window|minimize');
      } catch (error) {
        console.error('无法最小化窗口', error);
      }
    }
  };
  
  const handleMaximize = () => {
    if (typeof window !== 'undefined' && window.__TAURI__) {
      try {
        // @ts-ignore - 忽略TypeScript错误
        window.__TAURI__.invoke('plugin:window|toggle_maximize');
      } catch (error) {
        console.error('无法最大化/还原窗口', error);
      }
    }
  };
  
  const handleClose = () => {
    if (typeof window !== 'undefined' && window.__TAURI__) {
      try {
        // @ts-ignore - 忽略TypeScript错误
        window.__TAURI__.invoke('plugin:window|close');
      } catch (error) {
        console.error('无法关闭窗口', error);
      }
    }
  };
  
  return (
    <div className="window-controls">
      <Button 
        type="text" 
        icon={<MinusOutlined />} 
        onClick={handleMinimize}
        style={{ color: 'white' }}
      />
      <Button 
        type="text" 
        icon={<BorderOutlined />} 
        onClick={handleMaximize}
        style={{ color: 'white' }}
      />
      <Button 
        type="text" 
        icon={<CloseOutlined />} 
        onClick={handleClose}
        style={{ color: 'white' }}
        danger
      />
    </div>
  );
};

// 应用主布局组件
const AppLayout = () => {
  // 获取窗口尺寸
  const { width } = useWindowSize();
  
  // 侧边栏折叠状态
  const [leftCollapsed, setLeftCollapsed] = useState(width <= 768);
  const [rightCollapsed, setRightCollapsed] = useState(width <= 768);
  
  // 从store获取错误状态
  const { error, setError } = useAppStore();
  
  // 响应窗口尺寸变化
  useEffect(() => {
    if (width <= 768) {
      setLeftCollapsed(true);
      setRightCollapsed(true);
    } else if (width <= 1024) {
      setLeftCollapsed(false);
      setRightCollapsed(true);
    } else {
      setLeftCollapsed(false);
      setRightCollapsed(false);
    }
  }, [width]);
  
  // 切换左侧边栏
  const toggleLeftSider = () => {
    setLeftCollapsed(!leftCollapsed);
  };
  
  // 切换右侧边栏
  const toggleRightSider = () => {
    setRightCollapsed(!rightCollapsed);
  };
  
  // 清除错误
  const handleClearError = () => {
    setError(null);
  };
  
  return (
    <Layout className="app-layout">
      {/* 顶部标题栏 */}
      <Header className="app-header">
        <div className="logo-container">
          <span className="app-logo">📚</span>
          <h1>NovelAI</h1>
        </div>
        
        {/* 中间区域可以添加工具栏等 */}
        <div className="header-controls">
          <Button 
            type="text" 
            icon={leftCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />} 
            onClick={toggleLeftSider}
            style={{ color: 'white' }}
          />
        </div>
        
        {/* 窗口控制按钮 */}
        <WindowControls />
      </Header>
      
      {/* 主体内容区域 */}
      <Layout>
        {/* 左侧文件树 */}
        <Sider 
          width={260} 
          collapsible 
          collapsed={leftCollapsed}
          trigger={null}
          collapsedWidth={0}
          className="left-sider"
        >
          <FileTree />
        </Sider>
        
        {/* 中间编辑区 */}
        <Content className="content-area">
          <Editor />
        </Content>
        
        {/* 右侧AI助手 */}
        <Sider 
          width={300} 
          collapsible 
          collapsed={rightCollapsed}
          trigger={null}
          collapsedWidth={0}
          className="right-sider"
          reverseArrow
        >
          <Button 
            type="text"
            icon={rightCollapsed ? <MenuFoldOutlined /> : <MenuUnfoldOutlined />}
            onClick={toggleRightSider}
            style={{
              position: 'absolute',
              left: 0,
              top: 20,
              zIndex: 1
            }}
          />
          <AIDialog />
        </Sider>
      </Layout>
      
      {/* 错误提示 */}
      <ErrorDisplay error={error} onClose={handleClearError} />
      
      <style jsx global>{`
        .app-layout {
          height: 100vh;
          overflow: hidden;
        }
        
        .app-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          background-color: var(--primary-color);
          color: white;
          padding: 0 20px;
          height: 60px;
        }
        
        .logo-container {
          display: flex;
          align-items: center;
        }
        
        .app-logo {
          font-size: 24px;
          margin-right: 10px;
        }
        
        .header-controls {
          flex: 1;
          display: flex;
          justify-content: flex-start;
        }
        
        .window-controls {
          display: flex;
        }
        
        .left-sider {
          background-color: var(--sidebar-bg);
          border-right: 1px solid var(--border-color);
          overflow-y: auto;
        }
        
        .right-sider {
          background-color: white;
          border-left: 1px solid var(--border-color);
          overflow-y: auto;
        }
        
        .content-area {
          background-color: var(--editor-bg);
          overflow-y: auto;
          padding: 20px;
        }
        
        @media (max-width: 768px) {
          .app-header h1 {
            font-size: 18px;
          }
        }
      `}</style>
    </Layout>
  );
};

export default AppLayout;